<!DOCTYPE html>
<html style="font-size: 95.75px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>用电信息大数据统计分析</title>
    <script type="text/javascript" src="./src/jquery.js"></script>
    <link rel="stylesheet" href="./src/comon0.css">
    <link rel="stylesheet" href="./src/iconfont.css">
    <script type="text/javascript">
        $(document).ready(function(){

            var html_b=$("#boxall_b .wrap ul").html()
            $("#boxall_b .wrap ul").append(html_b)
            var ls_b=$("#boxall_b .wrap li").length/2+1
            i_b=0
            ref = setInterval(function(){
                i_b++
                if(i_b==ls_b){
                    i_b=1
                    $("#boxall_b .wrap ul").css({marginTop:0})
                    $("#boxall_b .wrap ul").animate({marginTop:-'.43'*i_b+'rem'},1000)
                }
                $("#boxall_b .wrap ul").animate({marginTop:-'.43'*i_b+'rem'},1000)
            },5400);


            var html_a=$("#boxall_a .wrap ul").html()
            $("#boxall_a .wrap ul").append(html_a)
            var ls_a=$("#boxall_a .wrap li").length/2+1
            i_a=0
            ref = setInterval(function(){
                i_a++
                if(i_a==ls_a){
                    i_a=1
                    $("#boxall_a .wrap ul").css({marginTop:0})
                    $("#boxall_a .wrap ul").animate({marginTop:-'.43'*i_a+'rem'},1000)
                }
                $("#boxall_a .wrap ul").animate({marginTop:-'.43'*i_a+'rem'},1000)
            },5200);

        })
    </script>

    <script type="text/javascript" src="./src/echarts.min.js"></script>
    <script type="text/javascript" src="./src/echarts-gl.min.js"></script>
    <script type="text/javascript" src="./src/ecStat.min.js"></script>
</head>

<body>
    <div class="loading" >
        <div class="loadbox"> <img src="./src/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>
            <img src="./src/logo.png"> 
            用电信息大数据实时统计分析
        </h1>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall boxall_1" style="height: 2rem" id="boxall_a">
                    <div class="alltitle">本日工单</div>
                    <div class="wrap">
                            <ul>
                                <li>
                                    <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                                </li>
    
                                <li>
                                    <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                                </li>
    
                                <li>
                                    <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                                </li>
    
                                <li>
                                    <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                                </li>
    
                                <li>
                                    <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                                </li>
                            </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>


                <div class="boxall boxall_2" style="height: 2.4rem" id="boxall_b">
                    <div class="alltitle">重点线路保障</div>
                    <div class="wrap">
                        <ul>
                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>
                        </ul>
                    </div>
                        
                    <div class="boxfoot"></div>
                </div>
              
            </li>

        
            <li>
                    <div class="boxall boxall3" style="height: 4.58rem" id="boxall_c">
                            <div class="alltitle">三维动态展示</div>
                            <div class="wrap" style="height:4.13rem">
                                <iframe src="http://www.baidu.com" id="armchatroom" frameborder="0" width="100%" height="100%" scrolling="no" rameborder="0"  allowTransparency="true" ></iframe>
                            </div>
                            <div class="boxfoot"></div>
                    </div>
            </li>

            <li>
                <div class="boxall" style="height:2rem" id="boxall_d">
                    <div class="alltitle">动环监控</div>

                    <div class="dhjk">
                        <div class="dhjk_box"><span class="iconfont icon-wenshidu err"></span><em>温湿度</em><i class="err">报警</i><p><b class="counter">1</b>/<em class="counter">214</em>台</p></div>
                        <div class="dhjk_box"><span class="iconfont icon-feng"></span><em>风扇控制</em><i>正常</i><p><em class="counter">433</em>台</p></div>
                        <div class="dhjk_box"><span class="iconfont icon-SmokeDetectors"></span><em>烟感</em><i>正常</i><p><em class="counter">10</em>台</p></div>
                        <div class="dhjk_box"><span class="iconfont icon-hekricon01"></span><em>PDU</em><i>正常</i><p><em class="counter">258</em>台</p></div>
                        <div class="dhjk_box"><span class="iconfont icon-menjin"></span><em>门禁</em><i>正常</i><p><em class="counter">219</em>台</p></div>
                        <div class="dhjk_box"><span class="iconfont icon-shexiangtou"></span><em>视屏</em><i>正常</i><p><em class="counter">186</em>台</p></div>
                    </div>
                    
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall boxall_2" style="height: 2.4rem" id="boxall_e">
                    <div class="alltitle">统计</div>
                    <div class="wrap" id="wrap_e">
                        <div id="container1" class="btbox btbox01" ></div>
                        <div id="container2" class="btbox btbox02" ></div>
                        <div id="container3" class="btbox btbox03" ></div>
                        <div id="container4" class="btbox btbox04" ></div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
        <div class="map">
            <div class="map1"><img src="./src/lbx.png"></div>
            <div class="map2"><img src="./src/jt.png"></div>
            <div class="map3"><img src="./src/map.png"></div>
            <div class="map4" id="map_1" _echarts_instance_="ec_1557038526486" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 1378px; height: 672px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div></div>
        </div>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="./src/js.js"></script>
    <script type="text/javascript" src="./src/echarts.min.js"></script>

    <script type="text/javascript" src="./src/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="./src/jquery.countup.min.js"></script>
    <script type="text/javascript">
        $('.counter').countUp();

        setInterval(function() {
        //    $("#wrap_e ul").prepend(`<li><p><em>aaa10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>aa计划停电  -  aaa3876574855  -  aaa2019043202348974</p></li>`);
           ls=$("#boxall_e .wrap li").length/2+1
            
        }, 5000);

        
        function refresharmchatroom(){
        var mframe=$('#armchatroom').attr("src");
        $("#armchatroom").attr("src",mframe);
        }
        setInterval("refresharmchatroom()",5000);
    </script>


<!-- 图表 -->
<script type="text/javascript">
    var dom = document.getElementById("container1");
    var myChart = echarts.init(dom);
    var app = {};
    option = {   
    legend: {
            orient: 'vertical',
            left: '50%',
            y: 'center',
            itemWidth: 20,   
            itemHeight: 20, 
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            },
    },
    series : [
            {
                type: 'pie',
                radius : '100%',
                center : ['25%', '50%'],
                normal: {
                        show: false
                },
                label: {
                    show: false
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                ],
                itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 },
                                normal:{
                                    color:function(params) {
                                    //自定义颜色
                                    var colorList = [          
                                            '#c23531', '#2f4554', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                        ];
                                        return colorList[params.dataIndex]
                                     }
                                }
                          }
                
            }
           
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>

<script type="text/javascript">
    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var app = {};
    option = {   
    legend: {
            orient: 'vertical',
            left: '50%',
            y: 'center',
            itemWidth: 20,   
            itemHeight: 20, 
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            },    
    },
    series : [
            {
                type: 'pie',
                radius : '100%',
                center : ['25%', '50%'],
                normal: {
                        show: false
                },
                label: {
                    show: false
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                ],
                itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 },
                                normal:{
                                    color:function(params) {
                                    //自定义颜色
                                    var colorList = [          
                                            '#61a0a8', '#d48265', '#FF8C00', '#2f4554', '#FF0000', '#FE8463',
                                        ];
                                        return colorList[params.dataIndex]
                                     }
                                }
                          }
                
            }
           
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>

<script type="text/javascript">
    var dom = document.getElementById("container3");
    var myChart = echarts.init(dom);
    var app = {};
    option = {   
    legend: {
        orient: 'vertical',
            left: '50%',
            y: 'center',
            itemWidth: 20,   
            itemHeight: 20, 
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            },    
    },
    series : [
            {
                type: 'pie',
                radius : '100%',
                center : ['25%', '50%'],
                normal: {
                        show: false
                },
                label: {
                    show: false
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                ],
                itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 },
                                normal:{
                                    color:function(params) {
                                    //自定义颜色
                                    var colorList = [          
                                            '#91c7ae', '#749f83', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                        ];
                                        return colorList[params.dataIndex]
                                     }
                                }
                          }
                
            }
           
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>

<script type="text/javascript">
    var dom = document.getElementById("container4");
    var myChart = echarts.init(dom);
    var app = {};
    option = {   
    legend: {
        orient: 'vertical',
            left: '50%',
            y: 'center',
            itemWidth: 20,   
            itemHeight: 20, 
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            },   
    },
    series : [
            {
                type: 'pie',
                radius : '100%',
                center : ['25%', '50%'],
                normal: {
                        show: false
                },
                label: {
                    show: false
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                ],
                itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 },
                                normal:{
                                    color:function(params) {
                                    //自定义颜色
                                    var colorList = [          
                                            '#ca8622', '#bda29a', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                        ];
                                        return colorList[params.dataIndex]
                                     }
                                }
                          }
                
            }
           
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body></html>